<template>
  <div class="table-wrapper">
    <div class="search-container">
    </div>
    <el-table
      :data="data"
      border
      height="calc(100vh - 200px)"
      style="width: 100%">
      <el-table-column
        prop="builde_name"
        label="所属楼宇"
        width="180">
      </el-table-column>
      <el-table-column
        prop="build_area"
        label="建筑面积">
      </el-table-column>
      <el-table-column
        prop="heating_area"
        label="采暖面积">
      </el-table-column>
      <el-table-column
        prop="type_name"
        label="类型"
        width="50">
      </el-table-column>
      <el-table-column
        prop="year_date"
        label="年份">
      </el-table-column>
      <el-table-column
        prop="month_1"
        label="1月">
      </el-table-column>
      <el-table-column
        prop="month_2"
        label="2月">
      </el-table-column>
      <el-table-column
        prop="month_3"
        label="3月">
      </el-table-column>
      <el-table-column
        prop="month_4"
        label="4月">
      </el-table-column>
      <el-table-column
        prop="month_5"
        label="5月">
      </el-table-column>
      <el-table-column
        prop="month_6"
        label="6月">
      </el-table-column>
      <el-table-column
        prop="month_7"
        label="7月">
      </el-table-column>
      <el-table-column
        prop="month_8"
        label="8月">
      </el-table-column>
      <el-table-column
        prop="month_9"
        label="9月">
      </el-table-column>
      <el-table-column
        prop="month_10"
        label="10月">
      </el-table-column>
      <el-table-column
        prop="month_11"
        label="11月">
      </el-table-column>
      <el-table-column
        prop="month_12"
        label="12月">
      </el-table-column>
      <el-table-column
        prop="avg_amount"
        label="平均数">
      </el-table-column>
      <el-table-column
        prop="total_amount"
        label="年度总数">
      </el-table-column>
    </el-table>
    <div class="el-pagination is-background">
      <button type="button" @click="prevPage" class="btn-prev">
        <i class="el-icon el-icon-arrow-left"></i>
      </button>
      <button type="button" class="btn-next" @click="nextPage">
        <i class="el-icon el-icon-arrow-right"></i>
      </button>
    </div>
  </div>
</template>

<script>
import portal from '@/api/portal'

export default {
  name: 'PcEnergy',
  data () {
    return {
      params: {
        page: 1
      },
      data: []
    }
  },
  created () {
    this.getPcEnergy()
  },
  computed: {
  },
  mounted () {
  },
  methods: {
    async getPcEnergy () {
      const result = await portal.getPcEnergy(this.params)
      if (result.data) {
        this.data = result.data
      }
    },
    prevPage () {
      if (this.params.page > 1) {
        this.params.page--
        this.getPcEnergy()
      }
    },
    nextPage () {
      if (this.data.length > 0) {
        this.params.page++
        this.getPcEnergy()
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
